<!-- templates/teacher/calendar.html -->
{% extends "student/base.html" %}

{% block title %}教学日历{% endblock %}

{% block content %}
<div class="p-4 md:p-6 lg:p-8">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <!-- 日历头部 -->
        <div class="p-6 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
            <div class="flex items-center justify-between mb-4">
                <h1 class="text-2xl font-bold text-gray-800">2025年秋季学期教学日历</h1>
                <div class="flex gap-3">
                    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center">
                        <i class="fa fa-download mr-2"></i>导出
                    </button>
                </div>
            </div>
            <div class="month-navigation">
                <button class="btn-nav">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <h2 class="text-xl font-semibold text-gray-800">2025年9月</h2>
                <button class="btn-nav">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
            <p class="text-center text-gray-600 mt-2">秋季学期 | 学期时间：2025年9月1日 - 2026年1月15日</p>
        </div>

        <!-- 日历网格 -->
        <div class="p-6">
            <!-- 星期标题 -->
            <div class="grid grid-cols-7 gap-1">
                <div class="text-center py-3 font-medium text-gray-600 bg-gray-50 rounded-t-lg">周一</div>
                <div class="text-center py-3 font-medium text-gray-600 bg-gray-50 rounded-t-lg">周二</div>
                <div class="text-center py-3 font-medium text-gray-600 bg-gray-50 rounded-t-lg">周三</div>
                <div class="text-center py-3 font-medium text-gray-600 bg-gray-50 rounded-t-lg">周四</div>
                <div class="text-center py-3 font-medium text-gray-600 bg-gray-50 rounded-t-lg">周五</div>
                <div class="text-center py-3 font-medium text-red-600 bg-red-50 rounded-t-lg">周六</div>
                <div class="text-center py-3 font-medium text-red-600 bg-red-50 rounded-t-lg">周日</div>
            </div>

            <!-- 日期内容 -->
            <div class="grid grid-cols-7 gap-1">
                <!-- 第1周 -->
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">28</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">暑假</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">29</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">暑假</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">30</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">暑假</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">31</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">暑假</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-blue-200 bg-blue-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-blue-600">1</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-blue-50 text-blue-700 border border-blue-100 inline-block">开学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">2</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-green-50 text-green-700 border border-green-100 inline-block">正式上课</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">3</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">周末</span>
                    </div>
                </div>

                <!-- 第2周 -->
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">4</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">5</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">6</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">7</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">8</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">9</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">周末</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">10</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">周末</span>
                    </div>
                </div>

                <!-- 第3周 -->
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">11</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">12</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">13</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">14</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-gray-100 bg-white rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-gray-800">15</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-gray-50 text-gray-700 border border-gray-100 inline-block">教学日</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">16</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">周末</span>
                    </div>
                </div>
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">17</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">周末</span>
                    </div>
                </div>

                <!-- 国庆节假期 -->
                <div class="relative min-h-[120px] p-4 border border-red-100 bg-red-50 rounded-b-lg transition-all duration-300 hover:shadow-lg hover:scale-[1.02] z-10 col-span-5">
                    <span class="absolute top-2 right-2 text-lg font-semibold text-red-500">30</span>
                    <div class="mt-6">
                        <span class="mt-1 px-2 py-1 text-xs rounded-full bg-red-50 text-red-700 border border-red-100 inline-block">国庆节假期</span>
                        <p class="mt-2 text-sm text-red-600">10月1日至7日放假调休</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 学期进度 -->
    </div>
</div>
{% endblock %}